<style lang="less">
.lesson-list{
    margin-top: 10px;
}
</style>

<template>
  <nut-navbar title="我的课程" left-show @click-back="router.back" />
  <section class="lesson-list">
    <LessonItemView v-for="(item, index) in store.lessonList" :key="index" :data="item" />
  </section>

  <section class="hasMainbar">
    <nut-pagination
        v-if="store.pageInfo.total > store.pageInfo.limit"
        v-model="store.pageInfo.page"
        :total-items="store.pageInfo.total"
        :items-per-page="store.pageInfo.limit"
        @change="handleChange"
    />
  </section>
  <MainBar :active="2" />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useStudentLessonStore } from '@/stores/studentLessons'
import LessonItemView from '@/components/mylesson/index.vue'
import MainBar from '@/components/mainbar/index.vue'

const store = useStudentLessonStore()
const expired = ref<boolean>(false)
const router = useRouter()
onMounted(() => store.getMyLessons(expired.value))

const handleChange = (page: number) => {
  store.changePage(page, expired.value)
}
</script>
